<template>
  <view>
    <yy-paging v-model="dataList" @query="queryList" ref="paging" @scroll="scroll" :auto="false" :refresher-enabled="false">
      <view class="flex flex-col gap-4 py-4">
        <u-navbar
          back-text="返回"
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="flex justify-between px-5 w-full">
            <view class="size-[24px] rounded-full" @click="vk.navigateTo('/pages/my/notice')">
              <image src="/static/icon_notification@3X.png" class="size-full" mode="scaleToFill" />
            </view>
            <view class="size-[24px] rounded-full" @click="vk.navigateTo('/pages/my/setUp')">
              <image src="/static/icon_set@3X.png" class="size-full" mode="scaleToFill" />
            </view>
          </view>
        </u-navbar>
        <!-- 头像 -->
        <view class="px-4">
          <view class="flex gap-5 items-center">
            <view class="size-[82px] border-[2px] border-solid border-[#F4F6F8] rounded-full overflow-hidden">
              <image :src="vk.myfn.handleImageUrl(vk.vuex.get('$user.userInfo.avatar'))" class="size-full" mode="scaleToFill" />
            </view>
            <view class="flex flex-col gap-2 justify-between">
              <view class="font-medium text-[18px] text-[#000000]">{{ vk.vuex.get('$user.userInfo.nickname') }}</view>
              <view class="flex gap-1 items-center font-normal text-[13px] text-[#606368]" @click="vk.navigateTo('/pages/my/editMy')">
                <text>编辑资料</text>
                <view>
                  <u-icon name="arrow-right" size="26" color="#606368"></u-icon>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 金刚区 -->
        <view class="px-4">
          <view class="bg-[#FFFFFF] rounded-[16px] flex justify-around items-center p-5">
            <view class="flex flex-col gap-2 items-center" @click="vk.navigateTo('/pages/my/collect')">
              <image src="/static/iconfavorite@3X.png" mode="scaleToFill" class="size-[34px]" />
              <text class="font-normal text-[12px] text-[#171B24]">我的收藏</text>
            </view>
            <view class="w-[1px] h-[13px] border-[1px] border-solid border-[#E6E7E9]"></view>
            <view class="flex flex-col gap-2 items-center">
              <image src="/static/icon_share@3X.png" mode="scaleToFill" class="size-[34px]" />
              <text class="font-normal text-[12px] text-[#171B24]">分享好友</text>
            </view>
          </view></view
        >
        <!-- 分类 -->
        <u-tabs :list="list" v-model="current" active-color="#00A9AB" inactive-color="#919499" @change="change" bg-color="transparent"></u-tabs>
        <view class="flex flex-col gap-5 px-4">
          <!-- 列表 -->
          <!-- 列表 -->
          <!-- 列表 -->
          <view class="grid grid-cols-2 gap-3">
            <view v-for="(i, k) in dataList" :key="k" class="col-span-1 rounded-[8px] overflow-hidden" @click="jumpDetails(i)">
              <view class="h-[170px] relative">
                <image :src="i.thumb" class="size-full 0" mode="scaleToFill" />
                <view class="px-[6px] py-[3px] bg-[#00A9AB] rounded-[2px] flex justify-center items-center absolute top-2 right-2">
                  <text class="text-[#FFFFFF] text-[14px] leading-none"> {{ i.basan_type == 1 ? '手杆' : '路亚' }}</text>
                </view>
              </view>
              <view class="flex flex-col gap-1 p-2 bg-white">
                <text class="text-[14px] text-[#171B24] line-clamp-2">
                  {{ i.name }}
                </text>
                <view class="flex gap-1 items-center">
                  <view class="flex-none">
                    <u-icon name="map-fill" color="#919499" size="28"></u-icon>
                  </view>
                  <view class="text-[11px] text-[#919499] line-clamp-1"> {{ i.location_name }} </view>
                </view>
              </view>
            </view>
            <view v-for="(i, k) in 3" :key="k"></view>
          </view>
        </view>
      </view>
    </yy-paging>
    <view></view>
    <view></view>
    <yy-tabbar :tabbarIndex="tabbarIndex"></yy-tabbar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabbarIndex: 2,
        isScroll: false,
        automatic: false,
        list: [
          {
            name: '全部'
          },
          {
            name: '手杆'
          },
          {
            name: '路亚'
          }
        ],
        current: 0,
        dataList: []
      }
    },
    onPageScroll(e) {
      this.isScroll = e.scrollTop > 0
    },
    onShow() {
      uni.hideTabBar()
    },
    onLoad(options) {
      setTimeout(() => {
        this.$refs.paging.reload()
        vk.pubfn.checkLogin() // 检测是否需要登录
      }, 0)
    },
    methods: {
      jumpDetails(i) {
        vk.navigateTo({
          url: `/pages/index/details?id=${i.id}`,
          events: {
            update: data => {
              this.$refs.paging.reload()
            }
          }
        })
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      change(e) {
        this.current = e
        this.$refs.paging.reload()
      },
      async queryList(page, limit) {
        let obj = {
          page,
          limit,
          user_id: vk.vuex.get('$user.userInfo.id'),
          basan_type: this.current
        }
        let res = await api.getBasanList(obj)

        if (!res.code) return
        this.$refs.paging.complete(res.data)
      }
    }
  }
</script>

<style lang="scss" scoped>
  html,
  page {
    background-image: url('/static/imd_personalCenter@3X.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: top !important;
    background-color: #f4f6f8 !important;

    // background-attachment: fixed !important;
  }
</style>
